<template>
	<view>

		<view class="index_box">
			<map id='map' ref='map' :longitude='longitude' :latitude='latitude' :markers="markers" :polyline="polyline"
				:scale='scale' show-location :enable-3D='enableThreeD' :enable-satellite='enableSatellite'
				:enable-traffic='enableTraffic' :enable-overlooking='true' :enable-rotate='true'>
			</map>
			<view class="icon_box">
				<view class="scale_box">
					<i class="iconfont icon-fangda" @click='zoomInMap'></i>
					<i class="iconfont icon-suoxiao" @click='zoomOutMap'></i>
				</view>
				<view class="location_box">
					<i class="iconfont icon-dingwei" @click='locateMap'></i>
				</view>
			</view>
		</view>

		<view class="typeInformation">
			<view class="search">
				<view class="origin_container">
					<view class="u-node u-node1" style="margin-top: 12px;margin-right: 10px;"></view>
					<input v-model="origin" type="text" :border="false" placeholder='我的位置'
						style='margin-top: 10rpx;width: 100%;font-size: 16px;' @click="searchOrginClick" />
				</view>

				<view class="destination_container">
					<view class="u-node u-node2" style="margin-top: 15px;margin-right: 10px;"></view>
					<input v-model="destination" type="text" :border="false" placeholder='您要去哪？'
						style="width: 100%;margin-top: 10px;font-size: 16px;" @click="searchEndAddressClick" />
				</view>
			</view>
			<u-button type="primary" shape="circle" class="call-car-btn" @click="jumpRouting">开始叫车</u-button>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar v-model="current" :list="tabBarList" :selected-color="activeColor" :border-style="inactiveColor"
			:border-top="borderTop" />

	</view>
</template>


<script>
	import amap from '../../common/amap-wx.js';
	import Driving from '../route_driving/route_driving.vue';
	import Tips from '../tips/tips.vue'
	import {
		key
	} from '../../common/map-key.js'
	import '@/static/iconfont/iconfont.css'
	import {userBar,driverBar} from '@/utils/tabBar.js'
	export default {
		beforeCreate(){
			this.$store.dispatch('changeTabbar',userBar);
			this.tabBarList = this.$store.state.tabBar;
		},
		data() {
			return {
				//导航信息：-----------------------------------
				title: '滴滴打车', // 导航栏的标题，这会显示在页面的顶部或作为当前视图的标题
				tabBarList: this.$store.state.dynamicTabbar, // 导航栏的列表项，来源于Vuex状态管理中的dynamicTabbar
				current: 0, // 当前激活的导航项的索引，0表示第一个导航项
				borderTop: true, // 控制是否有顶部边框，true表示有边框
				inactiveColor: 'black', // 未激活的TabBarItem的颜色
				activeColor: 'red', // 激活的TabBarItem的颜色
				//-----------------------------------
				longitude: '',
				latitude: '',
				amapPlugin: null,
				desc: '',
				markers: [],
				polyline: [],
				myPosition: {
					position: '',
					addressName: ''
				},
				scale: 16,
				map: null,
				enableSatellite: false, //开启卫星地图
				enableTraffic: false, //开启实时路况
				enableThreeD: false, //开启3d
				showxD: true, //2/3d显示
				showLayer: false, //图层弹出层
				clickItem: 1,


				//地址回显
				origin: null,
				orginName: null,
				destination: null


			}
		},

		onShow() {
			this.amapPlugin = new amap.AMapWX({
				key: key
			});
			// this.computedDestination();
			this.getRegeo();
			// 刷新数据
		},

		// onLoad() {
		// 	this.amapPlugin = new amap.AMapWX({
		// 		key: key
		// 	});
		// 	this.getRegeo();
		// 	this.computedDestination();
		// },
		onReady() {
			this.map = uni.createMapContext("map", this);
		},
		methods: {

			//初始化地图,获取当前所在位置
			//获取地图显示以及当前定位
			getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				});

				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log("data", data);
						this.myPosition.position = [data[0].longitude, data[0].latitude].join(',');
						this.longitude = data[0].longitude;
						this.latitude = data[0].latitude;
						this.$store.commit('setOrigin', data[0].name);
						this.$store.commit('setOriginLng', data[0].longitude);
						this.$store.commit('setOriginLat', data[0].latitude);
						uni.setStorageSync('originInfo', data[0]);
						uni.setStorageSync('city', data[0].regeocodeData.addressComponent.city);
						uni.hideLoading();

						// 定位回显
						this.origin = data[0].name;
						this.orginName = data[0].name;
						this.computedDestination();

						// 确保 markers 是数组
						if (!this.markers) {
							this.markers = [];
						}
						// 标记位置
						this.markers.push({
							id: 1,
							latitude: data[0].latitude,
							longitude: data[0].longitude,
							width: 40,
							height: 50,
							label: {
								content: this.origin,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_s.png'
						});
					},
					fail: (err) => {
						console.log(err.errMsg);
						uni.showToast({
							title: '获取位置失败！',
							icon: 'none',
						});
					}
				});
			},

			//搜索点击事件
			searchOrginClick() {
				uni.navigateTo({
					url: `/pages/index/searchAddress?targeLog=${encodeURIComponent("1")}`
					// url: '/pages/search_address/search_address'
				})
			},

			searchEndAddressClick() {
				uni.navigateTo({
					url: `/pages/index/searchAddress?targeLog=${encodeURIComponent("2")}`
					// url: '/pages/search_address/search_address'
				})
			},

			computedDestination() {
				const endStoredData = uni.getStorageSync('selected_endAddress');
				if (endStoredData) {
					this.destination = endStoredData.name;
					console.log("End address: " + this.destination);
				} else {
					this.destination = '';
				}

				const orginStoredData = uni.getStorageSync('selected_orginAddress');
				if (orginStoredData && orginStoredData.name) {
					this.origin = orginStoredData.name;
					console.log("Updated Origin address: " + this.origin);
				} else {
					this.origin = this.orginName;
					console.log("Fallback Origin address: " + this.origin);
				}
			},


			jumpRouting() {
				uni.navigateTo({
					url: '/pages/index/routePlan'
				})
			},


			//放大事件
			zoomInMap() {
				if (this.scale <= 20) {
					this.scale = this.scale + 1
				}
			},
			//缩小事件
			zoomOutMap() {
				if (this.scale >= 3) {
					this.scale = this.scale - 1
				}
			},
			//定位事件,需要设置show-location
			locateMap() {
				this.scale = 16
				this.map.moveToLocation()
			},
			//去路线规划页面
			goRoutePage() {
				uni.navigateTo({
					url: '/pages/route/route'
				})
				uni.setStorageSync('search_type', 'go_route')
			},


			//更改图层
			changeLayer() {
				this.showLayer = true
			},
			selectNormal() {
				this.clickItem = 1
				this.enableSatellite = false
				this.enableTraffic = false
			},
			selectSatellite() {
				this.clickItem = 2
				this.enableSatellite = true
				this.enableTraffic = false
			},
			selectRoad() {
				this.clickItem = 3
				this.enableTraffic = true
				this.enableSatellite = false
			}
		},
	}
</script>

<style scoped lang="less">
	.index_box {
		width: 100vw;
		height: 90vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	#map {
		width: 100%;
		flex: 1;
	}

	.icon_box {
		position: absolute;
		bottom: 20vh;
		right: 50rpx;
	}

	.icon_box>view {
		margin-bottom: 20rpx;
	}

	.serach_box {
		width: 100vw;
		margin: 40rpx auto;

		.serach_item {
			width: 90vw;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			color: #85888d;
			background-color: #f5fbfc;
			padding-left: 20rpx;
		}
	}


	// 首页遮罩
	.typeInformation {
		height: 180px;
		padding: 0 30rpx;
		border-radius: 50px;
		border-radius: 10rpx 10rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #e3e3e3;
		z-index: 1000;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 83px;

	}

	.call-car-btn {
		width: 70%;
	}

	.search {
		width: 97%;
		margin-left: 30px;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 2rpx 40rpx 40rpx 40rpx;
	}

	.origin_container {
		display: flex;
	}

	.destination_container {
		display: flex;
		margin-top: 30px;
	}

	.u-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f3f3f3;
	}

	.u-node1 {
		background-color: #22D78B;
	}

	.u-node2 {
		background-color: #FD6749;
	}



	.scale_box {
		padding: 10rpx;
		border-radius: 50rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		background-color: #ffffff;
		display: flex;
		flex-direction: column;

		.icon-fangda,
		.icon-suoxiao {
			font-size: 60rpx;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
	}

	.location_box {
		padding: 10rpx;
		border-radius: 50rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		background-color: #ffffff;

		.icon-dingwei {
			font-size: 60rpx;
		}
	}

	.route_box {
		padding: 10rpx 0;
		border-radius: 10rpx;

		background-color: #ffffff;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);

		.icon-xiangshang {
			font-size: 80rpx;
			color: #4B77FA;
		}
	}

	.d_box,
	.layer_box {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #ffffff;
		color: #4E79F7;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		overflow: hidden;
	}

	.icon-tuceng {
		font-size: 40rpx;
	}

	.layer_content {
		padding-top: 100rpx;
		display: flex;
		justify-content: space-around;


		.layer_item {
			// border: solid 2rpx #f2f1ed;
			border-radius: 20px;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.click_layer_item {
			border: solid 2rpx #4B77FA;
			padding: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>